<template>
  <div class="print">
    <div class="title">
      <span v-for="item in userStore.user.companyName" :key="item">{{ item + ' ' }} </span>
    </div>
    <div class="second-title">过 磅 单</div>
    <div class="row">
      <div class="label">单号</div>
      <div class="value">{{ baseOrder.baseOrderNo }}</div>
    </div>
    <div class="row" v-if="baseOrder.flow === '1'">
      <div class="label">供应商</div>
      <div class="value">{{ baseOrder.supplierName }}</div>
    </div>
    <div class="row" v-if="baseOrder.flow === '2'">
      <div class="label">客户</div>
      <div class="value">{{ baseOrder.customerName }}</div>
    </div>
    <!-- <div class="row">
      <div class="label">日期</div>
      <div class="value">{{ baseOrder.createDate }}</div>
    </div> -->
    <div class="row">
      <div class="label">车牌号</div>
      <div class="value">{{ baseOrder.number }}</div>
    </div>
    <div class="row">
      <div class="label">初磅重量</div>
      <div class="value">{{ saveWeightToShow(baseOrder.firstWeight) }}{{ weightUnit }}</div>
    </div>
    <div class="row">
      <div class="label">过磅时间</div>
      <div class="value">
        {{ baseOrder.weightInDate }}
      </div>
    </div>
    <template v-for="item in baseOrder.materialInfo" :key="item.id">
      <div class="row">
        <div class="label">{{ item.timeName }}磅重量</div>
        <div class="value">{{ saveWeightToShow(item.weightOut) }}{{ weightUnit }}</div>
      </div>
      <div class="row">
        <div class="label">过磅时间</div>
        <div class="value">
          {{ item.createDate }}
        </div>
      </div>
    </template>
    <!-- <div class="row">
      <div class="label">扣杂</div>
      <div class="value">{{ saveWeightToShow(baseOrder.inspectImpurity) }}{{ weightUnit }}</div>
    </div>
    <div class="row">
      <div class="label">预估干基</div>
      <div class="value">{{ saveWeightToShow(baseOrder.weightPure) }}{{ weightUnit }}</div>
    </div> -->
    <div class="row">
      <div class="label">单价</div>
      <div class="value">{{ savePriceToShow(baseOrder.priceTaxOut) }}元</div>
    </div>
    <div class="row">
      <div class="label">总价</div>
      <div class="value">{{ baseOrder.totalAmountTaxOut }}元</div>
    </div>
  </div>
</template>
<script setup>
import api from '@/api/index'
import { nextTick, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import html2canvas from 'html2canvas'
import { showToast } from 'vant'
import { numberToChinese } from '@/libs/utils'
import { getWeightUnit, saveWeightToShow, savePriceToShow } from '@/libs/unit'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const weightUnit = getWeightUnit()
const route = useRoute()
const router = useRouter()
const baseOrder = reactive({
  createDate: '',
  baseOrderNo: '',
  supplierName: '',
  customerName: '',
  flow: '',
  number: '',
  firstWeight: '',
  weightInDate: '',
  weightOut: '',
  weightOutDate: '',
  inspectImpurity: '',
  weightPure: '',
  materialInfo: [],
  priceTaxOut: '',
  totalAmountTaxOut: ''
})

function print() {
  const toast = showToast({
    type: 'loading',
    message: '加载中',
    forbidClick: true,
    overlay: true,
    duration: 0
  })
  html2canvas(document.querySelector('.print'), { useCORS: true }).then(function (canvas) {
    const base64 = canvas.toDataURL('image/png', 1)
    toast.close()
    router.back()
    window.android.imgPrint(base64.split('base64,')[1])
  })
}
onMounted(() => {
  const id = route.query.id
  api.baseOrderDetail({ id }).then((res) => {
    for (const key in baseOrder) {
      baseOrder[key] = res.data[key]
    }
    baseOrder.createDate = baseOrder.createDate.split(' ')[0].split('-').join('/')
    const weightInDateArr = baseOrder.weightInDate.split(' ')
    baseOrder.weightInDate =
      weightInDateArr[0].split('-').join('/') +
      ' ' +
      weightInDateArr[1].split(':').slice(0, 2).join(':')
    if (baseOrder.totalAmountTaxOut === null) {
      baseOrder.totalAmountTaxOut = '-'
    }
    let i = 2
    for (const item of baseOrder.materialInfo) {
      const weightOutDateArr = item.createDate.split(' ')
      item.createDate =
        weightOutDateArr[0].split('-').join('/') +
        ' ' +
        weightOutDateArr[1].split(':').slice(0, 2).join(':')
      item.timeName = numberToChinese(i)
      i++
    }
    nextTick(() => {
      print()
    })
  })
})
</script>
<style lang="scss" scoped>
.print {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  .title {
    font-size: 20px;
    height: 45px;
    line-height: 45px;
    text-align: center;
  }
  .second-title {
    font-size: 20px;
    height: 32px;
    line-height: 32px;
    text-align: center;
  }
  .success-icon {
    width: 80px;
    height: 80px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .row {
    display: flex;
    flex-direction: row;
    font-size: 18px;
    height: 52px;
    border: 2px solid #000;
    margin: 0 1px;
    .label {
      width: 147px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .value {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-left: 1px solid #000;
      img {
        width: 21px;
        height: 21px;
        margin-left: 6px;
      }
    }
  }
  .row + .row {
    border-top: none;
  }
}
</style>
